<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%;margin-bottom: 2%">
    <div style="width: 50%;text-align: right">
      <el-date-picker
          v-model="curPeriod"
          type="daterange"
          range-separator="->"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          size="large"
          style="margin: 0 0 0 10px;"
      />
    </div>
      <el-form-item label="商品条码" prop="id" style="width: 30%;margin: 0 0 0 10px">
        <el-input size="large" placeholder="输入条码" v-model="code" type="text"/>
      </el-form-item>
      <el-button size="large" round type="warning" style="width: 100px;margin-left: 3%" @click="submit">
        查询
      </el-button>
  </el-row>
  <div>
    <el-text size="large">共计{{tableData.length}}条流水记录</el-text>
    <el-table :data="pageTableData(tableData)"
              height="68.8vh"
              style="width: 100%;"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="createTime" label="日期" width="200"/>
      <el-table-column prop="orderId" label="交易订单号" width="250"/>
      <el-table-column prop="total" label="支付金额" />
      <el-table-column prop="payment" label="支付方式" />
      <el-table-column prop="attach" label="优惠活动" />
      <el-table-column label="状态" >
        <template #default="scope">
          {{scope.row.isDone===1?"成功":"未支付"}}
        </template>
      </el-table-column>
      <el-table-column prop="cashier" label="收银员" />
    </el-table>
    <div style="justify-content: center;align-items:center;height: 60px; background-color: rgba(255,255,255,0.72);boxShadow:1px 0px 1px #a6a6a6;z-index: 999;display: flex;padding: 5px 25px 5px 25px;">
      <div style="flex: 4;" >
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="->,prev, pager, next, jumper"
            :total="tableData.length"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {dateTimeUtils} from "@/utils/dateTimeUtils";
import {store} from "@/store";
import request from "@/utils/request";

const curPeriod=ref([
  new Date().setMonth(new Date().getMonth()-1),
  new Date(),
])
const code=ref("")
let businessDate=ref({
  storeId:store.getLocalCurrentStoreMain().storeId,
  startDate:"",
  endDate:"",
  code:""
})
const tableData=ref([])
const currentPage = ref(1)
const pageSize = ref(30)
onMounted(()=>{
  submit()
})
const submit = () => {
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[0]).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[1].setDate(curPeriod.value[1].getDate()+1)).formatDateByDay
  businessDate.value.code=code.value
  request.post("/business/get/businessSalesFlow",businessDate.value).then(res=>{
    tableData.value=res.data.sort(function (a, b) {
      return b.createTime.localeCompare(a.createTime)
    })
  })
}
const handleCurrentChange = (e) => {
  currentPage.value = e;
};
const pageTableData = (list) => {
  return list.filter(
      (item, index) =>
          index < currentPage.value * pageSize.value &&
          index >= pageSize.value * (currentPage.value - 1)
  );
};
</script>

<style scoped>

</style>